<template>
    <view class="box">
        <page-head :transparent='false'>
            <slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
        </page-head>
        <view class="img1">
            <img class="img_page" :src="yi001"/>
            <view class="img-b" @click="rechange"><img class="img-buy" :src="charge"/></view>
        </view>
        <view class="img2"><img class="img_page" :src="yi0002"/></view>
    </view>
</template>

<script>
    import yi0002 from '../../../static/img/guidance/yi0002.png'
    import charge from '../../../static/img/guidance/charge.png'
    import yi001 from '../../../static/img/guidance/yi001.png'

    export default {
        data() {
            return {
                title: '亿元红包',
                yi001: yi001,
                charge: charge,
                yi0002: yi0002
            };
        },
        methods: {

            iosClick() {
                callNative('jumpToNativPageRecharge')
            },
            rechange() {
                switch (uni.getSystemInfoSync().platform) {
                    case 'android':
                        appNavigateTo('shenque://dh.qssq.com/rechargeIndex');
                        break;
                    case 'ios':
                        this.iosClick();
                        break;
                    default:
                        appNavigateTo('shenque://dh.qssq.com/rechargeIndex');
                        break;
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .box {
        width: 100%;
        overflow: hidden;
        overflow-y: auto;

        .img1 {
            width: 100%;
            position: relative;

            .img_page {
                width: 100%;
                display: block;
            }

            .img-b {
                width: 100%;
                position: absolute;
                bottom: 3%;
                left: 30%;
                z-index: 5;

                .img-buy {
                    width: 36%;
                }
            }
        }

        .img2 {
            width: 100%;

            .img_page {
                width: 100%;
                display: block;
            }
        }
    }
</style>
